<style>
    .img {
        width: 350px;
        height: 350px;
        background: url('./imgs/x.jpg');
        position: relative;
        float: left;
    }

    .mask {
        width: 100px;
        height: 100px;
        background: yellow;
        opacity: .5;

        position: absolute;
        left: 0px;
        top: 0px;
    }

    .enlarge {
        width: 200px;
        height: 200px;
        background: url('./imgs/d.jpg');
        background-position: 0px 0px;
        float: left;
    }
</style>

<div class="box">
    <div class="img">
        <div class="mask"></div>
    </div>
    <div class="enlarge"></div>
</div>


<script>
    let imgObj = document.querySelector('.img')
    imgObj.onmousemove = function (evt) {
        let e = evt || window.event
        let l = e.pageX - document.querySelector('.box').offsetLeft - document.querySelector('.mask').offsetWidth / 2
        let t = e.pageY - document.querySelector('.box').offsetTop - document.querySelector('.mask').offsetHeight / 2
        document.querySelector('.mask').style.left = l + 'px'
        document.querySelector('.mask').style.top = t + 'px'
        document.querySelector('.enlarge').style.backgroundPosition = `-${l * 2}px -${t * 2}px`
    }
</script>